<template>
	<view class="">
		<u-popup mode="bottom" v-model="showPopup" :z-index="999" border-radius="24" safe-area-inset-bottom
			:maskCloseAble="false" @close="close">
			<view class="popBox">
				<view class="popup-title">
					<view class="let">修改{{ getTitle }}</view>

					<i class="iconfont icon-close" @click="showPopup = false"></i>
				</view>
				<view class="batchChange">
					<view class="name">
						可批量修改价格
					</view>
					<view v-if="batchNum" class="cons" @click="batch">
						<view class="iconfont" style="font-size: 38rpx;">
							&#xe6fd;
						</view>
						<view class="">
							批量
						</view>
					</view>
					<view v-if="!batchNum" class="cons" @click="batch">
						<view class="">
							取消批量
						</view>
					</view>
				</view>

				<view class="tabBox" v-if="data">
					<scroll-view class="tabHeader" scroll-x="true">
						<view class="item" v-for="(item, index) of data.title" :key="index" :class="[getClass(index)]"
							@click="changeIndex(index)">{{ item.attr_name }}
							<view class="icon"></view>
						</view>
					</scroll-view>

					<scroll-view scroll-y="true" class="tabCon">
						<u-checkbox-group shape="circle" placement="column" @change="checkboxChange">

							<view class="item" v-for="(item, i) of data.attr_group" :key="i">
								<view class="goods" v-if="i === index">
									<view class="goodsItem" v-for="(cItem, o) of item.list" :key="o">

										<view class="" v-if="checkShow">
											<u-checkbox activeColor="#F0250E" :name="cItem.no" v-model="cItem.checked">
											</u-checkbox>
										</view>

										<view class="img">
											<image :src="cItem.pic" mode="aspectFill"></image>
										</view>

										<view class="con">
											<view class="attr">{{ getAttr(cItem) }}</view>
											<view class="price">售价 ¥{{ cItem.price }}</view>
											<view class="price c-red">成本价 ¥{{ cItem.cost_price }}</view>
											<view class="des">货号 {{ cItem.no }}</view>
										</view>

										<view class="inp">
											<!-- <view v-if="status === 1">¥</view> -->
											<u-input v-if="status === 1" v-model="cItem.price" type="digit" clearable
												placeholder="请输入价格"></u-input>
											<u-input v-model="cItem.num" v-else-if="status === 2" type="number"
												clearable placeholder="请输入库存"></u-input>
										</view>
									</view>
								</view>
							</view>
						</u-checkbox-group>
					</scroll-view>
				</view>

				<view class="tools-pof">
					<view class="btn" v-if="!checkShow">
						<u-button :customStyle="{
	          background: '#F0250E',
	          color: '#fff',
	          borderRadius: '32px',
	        }" :hoverStartTime="hoverStartTime" @click="changeValue">{{ $t("newAdmin.filter.submit") }}</u-button>
					</view>

					<view class="footer" v-if="checkShow">
						<view class="footerCheckBox" @click="changeAll">
							<view class="footerText">
								<radio style="transform: scale(0.7)" color="#FA3534" value="r1" :checked="isAll" />全部
							</view>
						</view>
						<view class="footerBtn">
							<view class="" style="width: 192rpx; margin-left: 24rpx;">
								<u-button @click="setPrice" type="error" shape="circle">设置{{getTitle}}</u-button>
							</view>
							<view class="" style="width: 192rpx; margin-left: 24rpx;">
								<u-button @click="changeValue" type="error" shape="circle">完成设置</u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show" mode="bottom" border-radius="14" width="750rpx" heigth="550rpx" :closeable="true"
			:mask-close-able="false">
			<view style=" padding: 28rpx;">
				<view class="changePrice">
					修改{{getTitle}}
				</view>
				<view class="inputStyle">
					<view class="names">
						{{getTitle}}<text style="margin-left: 150rpx; color: #8C8C8C;">￥</text>
					</view>
					<view class="put">
						<u-input :placeholder="`请输入${getTitle}`" :focus="true" v-model="value" type="number" />
					</view>
				</view>
				<view class="btn">
					<u-button :customStyle="{
				  background: '#F0250E',
				  color: '#fff',
				  borderRadius: '32px',
				}" @click="overSure">{{ $t("newAdmin.filter.submit") }}</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		storeAdminGetGoodsAttr,
		storeAdminSetGoodsPrice
	} from "@/api/admin";

	export default {
		data() {
			return {
				showPopup: false,
				disabled: false,
				isAll: false,
				data: null,
				index: 0,
				// 改变批量状态
				batchNum: true,
				// 动态判断复选框的显示和隐藏
				checkShow: false,
				show: false,
				// 全选值
				value: null,
				all: [],
				allNum: null,
			};
		},

		props: {
			hoverStartTime: {
				type: Number,
			},

			customStyle: {
				type: Object,
				default () {
					return {};
				},
			},
			md_id: {
				type: Number,
				default: undefined,
			},

			goodsId: {
				type: [Number, String],
				default: undefined,
			},

			status: {
				type: Number,
				default: 1,
			},
		},

		watch: {
			goodsId() {
				this.getAttrData();
			},

			data: {
				handler(val) {
					if (!val) {
						return;
					}

					let list = val.attr_group;
					if (list) {
						let {
							index
						} = this;
						if (list[index].list.every((el) => el.checked)) {
							this.isAll = true;
						} else {
							this.isAll = false;
						}
					}
				},
				deep: true,
			},
		},

		computed: {
			getAttr() {
				return (item) => {
					return item.attr_list.map((el) => el.attr_name).join("/");
				};
			},

			getClass() {
				return (index) => {
					return this.index === index ? "on" : "";
				};
			},

			getTitle() {
				return this.status === 1 ? "价格" : "库存";
			},

			getStatus() {
				return this.BatchProcessing ? "取消批量" : "批量";
			},
		},

		methods: {

			overSure() {
				// 批量修改价格
				if (this.status === 1) {
					this.data.attr_group.map(val => {
						val.list.map(item => {
							for (let item1 of this.allNum) {
								if (item1 === item.no) {
									item.price = this.value
									break; // 找到匹配项后退出循环
								}
							}
						})
					})
				} else {
					//批量修改库存
					this.data.attr_group.map(val => {
						val.list.map(item => {
							for (let item1 of this.allNum) {
								if (item1 === item.no) {
									item.num = parseInt(this.value)
									break; // 找到匹配项后退出循环
								}
							}
						})
					})
				}
				this.changeValue()
			},
			close(){
				this.checkShow=false
				// 批量恢复常态
				this.batchNum=true
				// 批量选中清空
				this.all = []
			},

			// 复选框回调
			checkboxChange(n) {
				this.allNum = n
			},
			// 点击批量
			batch() {
				// 改变复选框和批量状态
				this.batchNum = !this.batchNum
				this.checkShow = !this.checkShow
			},
			// 设置价格弹出层打开
			setPrice() {
				// 打开输入框
				this.show = true
			},

			changeValue() {
				let {
					data,
					goodsId: id
				} = this,
				attr_group = JSON.parse(JSON.stringify(data.attr_group)),
					params = {
						id,
					};

				attr_group.forEach((el) => {
					el.list.forEach((cEl) => {
						delete cEl.checked;
					});
				});

				params.attr = [];
				attr_group.forEach((el) => {
					params.attr.push(...el.list);
				});

				// return

				this.$allrequest.mdAdmin.changePriceNum(params).then((res) => {
					this.$utils.toast(res.msg);
					if (res.code === 0) {
						// 关闭两个弹出框
						this.show = false
						this.showPopup = false;
						this.checkShow=false
						// 批量恢复常态
						this.batchNum=true
						// 批量选中清空
						this.all = []
						this.getAttrData();
					}
				});
			},

			getAttrData() {
				this.$allrequest.mdAdmin.productSpecifications({
						id: this.goodsId,
						md_id: this.md_id
					})
					.then((res) => {
						if (res.code === 0) {
							let {
								attr_group,
								title
							} = res.data;

							this.clearData(attr_group);

							this.data = {
								attr_group,
								title,
							};
						}
					});
			},

			setData() {
				let {
					index,
					data
				} = this, {
					attr_group
				} = data;

				if (!attr_group[index].list.some((el) => el.checked)) {
					this.$utils.toast("请至少选择一条数据");
					return;
				}

				this.$refs.pagePopInp.showPopup = true;
			},

			handle(item) {
				if (!this.BatchProcessing) return;
				this.$set(item, "checked", !item.checked);
			},

			clearData(list) {
				list.forEach((el) => {
					el.list.forEach((cEl) => {
						cEl.checked = false;
					});
				});
			},

			changeIndex(index) {
				this.all = []
				if (this.index === index) {
					return;
				}

				this.index = index;
				this.isAll = false;
				this.clearData(this.data.attr_group);
			},

			changeAll() {
				this.isAll = !this.isAll;
				let {
					index,
					data
				} = this;
				if (this.isAll) {
					data.attr_group[index].list.forEach((el) => {
						el.checked = true;
						if (!this.all.includes(el.no)) {
							this.all.push(el.no);
						}
					});
					this.checkboxChange(this.all)
				} else {
					data.attr_group[index].list.forEach((el) => (el.checked = false));
					this.all = []
					this.checkboxChange(this.all)
				}
			},

			submit() {
				// let { name } = this;
				// if (!name) {
				//   this.$utils.toast("标题不能为空~");
				//   return;
				// }
				// this.disabled = true;
				// this.Emit.$emit("changeName", name);
			},
		},
	};
</script>

<style lang="less" scoped>
	.inputStyle {
		display: flex;
		align-items: center;
		background-color: #F8F8F8;
		padding: 5rpx 30rpx;
		border-radius: 20rpx;
		margin: 50rpx 0rpx;
	}

	.changePrice {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 30rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;


	}

	.names {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #262626;
		line-height: 0rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-top: 5rpx;
	}

	.put {
		flex-grow: 1;
		width: 400rpx;
	}

	.footerText {
		height: 44rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
		display: flex;
		align-items: center;
	}

	.footerCheckBox {
		display: flex;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
	}

	.footer {
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}

	.footerBtn {
		display: flex;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-style: normal;
		text-transform: none;
	}

	.batchChange {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 36rpx;

		.name {
			width: 168rpx;
			height: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			font-style: normal;
			text-transform: none;
		}

		.cons {
			height: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			font-style: normal;
			text-transform: none;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
	}

	.popBox {
		display: flex;
		flex-direction: column;
		padding: 0 0;
	}

	.popup-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 26rpx 36rpx;

		.let {
			font-size: 32rpx;
			color: #262626;
			font-weight: bold;
		}

		.iconfont {
			color: #262626;
		}
	}

	.tools-pof {
		margin-top: 20rpx;
		padding: 10rpx 30rpx;
	}

	.BatchProcessing {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.let {
			font-size: 32rpx;
			color: #262626;
		}
	}

	.filter {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 24rpx;
		/* background: #f8f8f8; */
		font-size: 24rpx;
		color: #666;
	}

	.filterLet {
		flex: 1;
		overflow: hidden;
		display: flex;

		.item {
			position: relative;
			padding-right: 30rpx;
			margin-right: 64rpx;
		}

		.text {
			color: #666;
		}

		.icon {
			position: absolute;
			right: 0;
			top: 50%;
			margin-top: -2rpx;
			border-width: 8rpx 8rpx 0;
			border-style: solid;
			border-color: #dbdbdb transparent transparent;
		}
	}

	.filterRig {
		display: flex;
		align-items: center;
		overflow: hidden;

		.iconfont {
			color: #262626;
			font-size: 36rpx;
		}

		.text {
			margin-left: 5rpx;
		}
	}

	.tabBox {
		display: flex;
		flex-direction: column;
		padding: 0 36rpx;
		height: 760rpx;
		overflow: hidden;
	}

	.tabHeader {
		height: 100rpx;
		white-space: nowrap;

		.item {
			position: relative;
			display: inline-block;
			margin-right: 62rpx;
			vertical-align: middle;
			height: 100rpx;
			line-height: 100rpx;
			overflow: hidden;
			font-size: 28rpx;
			color: #262626;

			.icon {
				position: absolute;
				bottom: 19%;
				left: 0;
				right: 0;
				height: 6rpx;
				background: #f0250e;
				opacity: 0;
			}

			&.on {
				font-weight: bold;

				.icon {
					opacity: 1;
				}
			}
		}
	}

	.tabCon {
		flex: 1;
		overflow-y: auto;
		border-top: 1px solid #f2f2f2;
		border-bottom: 1px solid #f2f2f2;
	}

	.goodsItem {
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		border-top: 1px solid #f2f2f2;

		&:first-of-type {
			border-top: 0;
		}

		.img {
			width: 72rpx;
			height: 72rpx;
			border-radius: 10rpx;
			background: #f8f8f8;
			font-size: 24rpx;
			color: #262626;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.con {
			margin: 0 24rpx;
			flex: 1;
			overflow: hidden;

			view {
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}

			.price {
				margin: 4rpx 0;
			}

			.price,
			.des {
				color: #8c8c8c;
				font-size: 24rpx;
			}

			.c-red {
				color: #f0250e;
			}
		}

		.inp {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx;
			width: 234rpx;
			height: 88rpx;
			background: #f8f8f8;

			.num {
				flex: 1;
				overflow: hidden;
				margin-left: 4rpx;
				text-align: right;
			}
		}
	}
</style>